<template>
  <view class="container">
    <view class="eventName">
      <p style="margin-left: 10rpx">活动名称：</p>
      <input type="text" v-model="eventName" placeholder="请填写活动名称" />
    </view>
    <u-line class="u-line"></u-line>
    <view class="applyReason">
      <p style="margin-left: 10rpx">申请原因:</p>
      <view class="reasonBorder">
        <textarea
          style="height: scrollHieght"
          v-model="applyReason"
          cols="30"
          rows="6"
          placeholder="请填写活动名称"
        ></textarea>
      </view>
    </view>
    <u-line class="u-line"></u-line>
    <view class="needed">
      <p style="margin: 10rpx">预估经费:</p>
      <u-keyboard ref="uKeyboard" mode="number" v-model="show"></u-keyboard>
      <view class="" style="margin-left: 50rpx">
        <u-row gutter="16">
          <u-col span="5">
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
              class="neededTitle"
              >用途</view
            >
          </u-col>
          <u-col span="5">
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
              class="neededTitle"
              >预计经费</view
            >
          </u-col>
        </u-row>
      </view>
      <view style="margin-left: 50rpx">
        <u-row gutter="16">
          <u-col span="5">
            <input
              type="text"
              class="neededTitleWord"
              placeholder="请输入用途"
              v-model="reason"
            />
          </u-col>
          <u-col span="5">
            <input
              type="text"
              class="neededTitleWord"
              placeholder="请输入预计经费"
              v-model="neededMoney"
            />
          </u-col>
        </u-row>
      </view>
    </view>
    <u-upload ref="uUpload" :action="action" :auto-upload="false"></u-upload>
    <view class="submitBtn" @click="submit"> 提交 </view>
    <u-modal v-model="showFinish" @confirm="confirmed" content="您已完成申请"></u-modal>
    <u-modal v-model="showConfirm" show-cancel-button @confirm="confirm"  :async-close="true" content="请确认是否申请"></u-modal>
    <u-modal v-model="showWarning" content="请输入正确的申请信息"></u-modal>
    <u-mask :show="showCricle" @click="show = false"></u-mask>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { applySingleMoney } from '../../../utils/modules/finance.js'
import { useUserStore } from '@/stores/modules/login.js'
const currentInstance = getCurrentInstance()
const userStore = useUserStore()
const action = ref('') //这里填写oss地址吧 应该是
const fileList = ref([])
const eventName = ref()
const applyReason = ref('')
const id = ref('')
// const show = ref(true)
const neededMoney = ref('')
const reason =ref('')
const showFinish = ref(false)
const showConfirm = ref(false)
const showWarning = ref(false)
function confirm() {
  currentInstance.ctx.$refs.uUpload.upload()
    // currentInstance.ctx.$refs.uForm.validate(valid => {)
    applySingleMoney({
    eventName: eventName.value,
    userId: userStore.userId,
    money: parseInt(neededMoney.value)
  }).then((res) => {
      showConfirm.value = false
      setTimeout(() => {
        showFinish.value = true
        eventName.value = '',
        reason.value = '',
        neededMoney.value = '',
        applyReason.value = ''
      }, 1000)
    })
    showFinish.value = false
}
function confirmed() {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}
function submit() {
  if(eventName.value != '' && neededMoney.value != '' && reason.value != '' && applyReason.value != ''){
    showConfirm.value = true
  } else {
    showWarning.value = true
  }
}
const rules = ref({
				name: [
					{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change','blur'],
					}
				],
				intro: [
					{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}
				]
			})

</script>

<style lang="scss">
.container {
  margin: 20rpx;
  font-size: 35rpx;

  .eventName {
    margin: 20rpx;

    display: flex;
    flex-direction: row;
  }

  .applyReason {
    margin: 20rpx;

    .reasonBorder {
      border: 1px solid #c6c6c6;
      border-radius: 10rpx;
      margin: 10rpx;
      padding: 20rpx;
      height: 300rpx;
    }
  }

  .needed {
    margin: 20rpx;

    .neededTitle {
      color: #d7d7d7;
      background: #99a9bf;
      height: 100rpx;
      border-radius: 10rpx;
    }

    .neededTitleWord {
      width: 190rpx;
      margin-left: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      border-radius: 10rpx;
    }
  }

  .addItemBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #99a9bf;
    width: 120rpx;
    border-radius: 10rpx;
    margin-left: 280rpx;
  }

  .submitBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50rpx;
    margin-top: 50rpx;
    background: linear-gradient(to right, #26a4f5, #96c4f5);
    padding: 10rpx;
    border-radius: 20rpx;
  }
}
</style>

<style scoped lang="scss">
.wrap {
  padding: 24rpx;
}

.u-row {
  margin: 40rpx 0;
}

.demo-layout {
  height: 80rpx;
  border-radius: 8rpx;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>
